<template>
  <div class="easy-container flex align-items-center">
    <router-link :to="`/users/${reUser.id}`" class="shrink-0 flex align-items-center">
      <el-avatar :src="reUser.avatar" :size="50" />
    </router-link>
    <div class="flex-1 m-x-16">
      <div class="line1 m-b-4 flex align-items-center flex-wrap">
        <router-link :to="`/users/${reUser.id}`" class="title hover-primary">
          {{ reUser.nickname }}
        </router-link>
        <span v-if="genderIcon.icon" class="ll-icon m-l-10 m-t-0">
          <svg-icon :icon-name="genderIcon.icon" class="s16" :style="`color:${genderIcon.color};`"/>
          &nbsp;{{ genderIcon.label }}
        </span>
        <span v-if="reUser.living" class="ll-icon m-l-10 m-t-0">
          <svg-icon icon-name="location" class="s14" style="color: #e6a23c;" />
          &nbsp;{{ reUser.living }}
        </span>
      </div>
      <div v-if="reUser.tags.length" class="m-b-4" style="margin-left: -10px;">
        <span
          v-for="tag in reUser.tags"
          :key="tag"
          class="ll-icon ll-icon--blue m-l-10 m-t-0"
        >{{ tag }}</span>
      </div>
      <div class="info">
        <span v-if="user.infos.be_liked">{{ user.infos.be_liked }} 获赞</span>
        <span v-if="user.infos.be_liked && user.infos.fans" style="margin: 0 4px;">·</span>
        <span v-if="user.infos.fans">{{ user.infos.fans }} 粉丝</span>
      </div>
    </div>
    <div class="flex align-items-center shrink-0">
      <follow-button :user="reUser" @attention="handleAttention" />
    </div>
  </div>
</template>

<script>
import FollowButton from '@/views/users/show/components/follow-button';

export default {
  name: 'component-follow-list-item',
  components: { FollowButton },
  props: {
    user: Object,
  },
  data() {
    return {
      reUser: this.user,
    };
  },
  computed: {
    genderIcon() {
      switch (this.reUser.gender) {
        case 'male': return { icon: 'male', color: '#0084ff', label: '男' };
        case 'female': return { icon: 'female', color: '#F56C6C', label: '女' };
        default: return { label: '它' };
      }
    },
  },
  methods: {
    handleAttention(user) {
      this.reUser = user;
    },
  },
};
</script>

<style></style>
